<template>
  <div class="dashboard-container">
    <div class="page-header">
      <h1>欢迎进入轻客管家系统</h1>
      <div class="welcome-info">
        <span>当前用户：{{ userInfo?.name || '管理员' }}</span>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stat-cards" v-if="!loading">
      <div class="stat-card-section">
        <h3 class="section-title">线索概览</h3>
        <div class="cards-row">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.clueTotal || 0 }}</div>
              <div class="stat-label">总线索</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.clueWaitAllot || 0 }}</div>
              <div class="stat-label">待分配</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.clueWaitFollow || 0 }}</div>
              <div class="stat-label">待跟进</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.clueFollowing || 0 }}</div>
              <div class="stat-label">跟进中</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.clueConvertBusiness || 0 }}</div>
              <div class="stat-label">转化商机</div>
            </div>
          </el-card>
        </div>
      </div>

      <div class="stat-card-section">
        <h3 class="section-title">商机概览</h3>
        <div class="cards-row">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.businessTotal || 0 }}</div>
              <div class="stat-label">总商机</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.businessWaitAllot || 0 }}</div>
              <div class="stat-label">待分配</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.businessWaitFollow || 0 }}</div>
              <div class="stat-label">待跟进</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.businessFollowing || 0 }}</div>
              <div class="stat-label">跟进中</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.businessConvertCustomer || 0 }}</div>
              <div class="stat-label">转化客户</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 快捷操作区域 -->
    <div class="quick-actions">
      <div class="actions-grid">
        <el-card class="action-card" @click="navigateTo('/course-management')">
          <div class="action-content">
            <div class="action-title">课程管理</div>
            <div class="action-subtitle">课程信息维护</div>
          </div>
        </el-card>
        <el-card class="action-card" @click="navigateTo('/activity-management')">
          <div class="action-content">
            <div class="action-title">活动管理</div>
            <div class="action-subtitle">营销活动管理</div>
          </div>
        </el-card>
        <el-card class="action-card" @click="navigateTo('/lead-list')">
          <div class="action-content">
            <div class="action-title">线索管理</div>
            <div class="action-subtitle">潜在客户追踪</div>
          </div>
        </el-card>
        <el-card class="action-card" @click="navigateTo('/opportunity-list')">
          <div class="action-content">
            <div class="action-title">商机管理</div>
            <div class="action-subtitle">销售机会管理</div>
          </div>
        </el-card>
        <el-card class="action-card" @click="navigateTo('/customer-management')">
          <div class="action-content">
            <div class="action-title">客户管理</div>
            <div class="action-subtitle">客户信息维护</div>
          </div>
        </el-card>
        <el-card class="action-card" @click="navigateTo('/system-log')">
          <div class="action-content">
            <div class="action-title">日志统计</div>
            <div class="action-subtitle">系统操作日志</div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 系统公告区域 -->
    <div class="announcement-section">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>系统公告</span>
            <el-button type="text" size="small" class="view-more" @click="viewAllAnnouncements">查看更多</el-button>
          </div>
        </template>
        <!-- 重要公告 - 使用特殊样式标识 -->
        <div class="announcement-content important">
          <div class="announcement-item">
            <div class="announcement-title">
              <el-tag type="danger" size="small" class="announcement-tag">重要</el-tag>
              数据安全合规通知
            </div>
            <div class="announcement-date">2024-10-10</div>
          </div>
          <div class="announcement-detail">
            根据最新数据安全法规要求，请所有用户在本周内完成个人信息确认和隐私协议更新。未完成的用户账号将在10月15日后受限，请及时操作。
          </div>
        </div>
        <!-- 一般公告 -->
        <div class="announcement-content">
          <div class="announcement-item">
            <div class="announcement-title">
              <el-tag type="info" size="small" class="announcement-tag">功能更新</el-tag>
              用户管理模块升级完成
            </div>
            <div class="announcement-date">2024-10-05</div>
          </div>
          <div class="announcement-detail">
            用户管理模块已完成升级，新增头像上传优化、批量操作功能，并修复了已知问题。请管理员注意查看更新日志了解详细变化。
          </div>
        </div>
        <div class="announcement-content">
          <div class="announcement-item">
            <div class="announcement-title">
              <el-tag type="success" size="small" class="announcement-tag">系统通知</el-tag>
              定期维护公告
            </div>
            <div class="announcement-date">2024-09-28</div>
          </div>
          <div class="announcement-detail">
            系统将于每周日凌晨2:00-4:00进行例行维护，维护期间部分功能可能暂时无法使用。建议用户避开此时间段进行重要操作，感谢理解与支持。
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOverviewData } from '@/api/report'

// 页面数据状态
const router = useRouter()
const loading = ref(true)
const overviewData = reactive({
  clueTotal: 0,
  clueWaitAllot: 0,
  clueWaitFollow: 0,
  clueFollowing: 0,
  clueFalse: 0,
  clueConvertBusiness: 0,
  businessTotal: 0,
  businessWaitAllot: 0,
  businessWaitFollow: 0,
  businessFollowing: 0,
  businessFalse: 0,
  businessConvertCustomer: 0
})

// 导航到指定页面
const navigateTo = (path) => {
  router.push(path)
}

// 查看所有公告
const viewAllAnnouncements = () => {
  // 这里可以根据实际需求跳转到公告列表页面或显示公告对话框
  ElMessage({ message: '公告详情功能正在开发中', type: 'info' })
  // 后续可以实现跳转到专门的公告页面
  // router.push('/announcements')
}

// 计算属性：获取用户信息
const userInfo = computed(() => {
  const userInfoStr = localStorage.getItem('userInfo')
  return userInfoStr ? JSON.parse(userInfoStr) : null
})

// 获取概览数据
const fetchOverviewData = async () => {
  try {
    loading.value = true
    const response = await getOverviewData()
    
    // 更新概览数据
    Object.assign(overviewData, response.data)
  } catch (error) {
    console.error('获取概览数据失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 处理功能卡片点击
const handleFunctionClick = (functionName) => {
  ElMessage.info(`${functionName}功能开发中`)
}

// 页面挂载时获取数据
onMounted(() => {
  fetchOverviewData()
})
</script>

<style scoped>
.dashboard-container {
  height: 100%;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

/* 页面头部样式 */
.welcome-info {
  margin-top: 8px;
  color: #606266;
  font-size: 14px;
}

/* 统计卡片样式 */
.stat-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

/* 加载状态样式 */
.loading-container {
  padding: 20px;
}

.stat-card-section {
  flex: 1;
}

.section-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 16px;
  font-weight: 500;
}

.cards-row {
  display: flex;
  gap: 16px;
}

.stat-card {
  flex: 1;
  text-align: center;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-content {
  padding: 20px 0;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* 快捷操作样式 */
.quick-actions {
  margin-bottom: 24px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.action-card {
  height: 100px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: #f0f9ff;
}

.action-content {
  text-align: center;
}

.action-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.action-subtitle {
  font-size: 12px;
  color: #909399;
}

/* 公告区域样式 */
.announcement-section {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-more {
  color: #1890ff;
  transition: color 0.3s;
}

.view-more:hover {
  color: #40a9ff;
  text-decoration: underline;
}

/* 公告内容基础样式 */
.announcement-content {
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
}

/* 重要公告样式 */
.announcement-content.important {
  background-color: #fff7e6;
  border-left: 4px solid #ff9800;
  padding-left: 12px;
  margin-left: -16px;
  margin-right: -16px;
}

.announcement-content:last-child {
  border-bottom: none;
}

.announcement-content:hover {
  background-color: #fafafa;
}

.announcement-content.important:hover {
  background-color: #fff1cf;
}

.announcement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.announcement-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.announcement-tag {
  margin-right: 4px;
}

.announcement-date {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.announcement-detail {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  padding-left: 24px;
  margin-top: 4px;
}

/* 重要公告的详情文本颜色稍深 */
.announcement-content.important .announcement-detail {
  color: #303133;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .announcement-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .announcement-date {
    align-self: flex-end;
  }
  
  .announcement-detail {
    padding-left: 0;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .quick-functions {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .stat-cards {
    flex-direction: column;
  }
  
  .quick-functions {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .stat-value {
    font-size: 24px;
  }
}
</style>